<template>
  <el-dialog title="会员打卡" :visible.sync="visible" :close-on-click-modal="false"
    :before-close="handleCloseDialog" width="680px">
    <el-form :model="dataObject" :rules="rules" ref="adminForm" label-width="100px" size="small">
      <el-form-item label="会员：" prop="phoneNo">
        <el-input v-model="dataObject.phoneNo" disabled placeholder="请输入会员"  clearable></el-input>
      </el-form-item>
      <el-form-item label="打卡日期：" prop="balance">
         <el-date-picker
            v-model="dataObject.date"
            type="date"
            :picker-options="pickerOptions"
            style="width: 100%;"
            placeholder="选择日期">
          </el-date-picker>
      </el-form-item>
      
    
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirmDialog('adminForm')" size="mini" :loading="loading">确 定</el-button>
      <el-button @click="handleCloseDialog" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { momentFormatTime } from "@/utils/date";
import { signMemberList,addSignMember } from '@/api/member/index';
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("member");
const defaultObject = {
  date: "",
  phoneNo: ""
};

export default {
  data() {
    return {
      visible:true,
      loading: false,
      dataObject: Object.assign({}, defaultObject),
      selectedDates: [],
      pickerOptions: {
        disabledDate:(time)=> {
          const formattedDate=momentFormatTime(time, "YYYY-MM-DD");
          return this.selectedDates.includes(formattedDate);
        },
        // 自定义单元格样式（旧版本兼容方案）
        // cellClassName: (date) => {
        //     console.log(2222222)
        //   // 格式化日期为 'yyyy-MM-dd'
        //   // const formattedDate = `${date.getFullYear()}-${
        //   //   String(date.getMonth() + 1).padStart(2, '0')
        //   // }-${String(date.getDate()).padStart(2, '0')}`;
        
          
        //   // // 为已选日期添加样式
        //   // if (this.selectedDates.includes(formattedDate)) {
        //   //   return 'selected-date';
        //   // }
        // }
      }
    };
    
  },
  props: {
    row: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...mapState({
      rules: state => state.rules,
      rechargeOptions: state => state.routes.rechargeOptions
    })
  },
  mounted() {
     this.getLoad();
     this.dataObject.phoneNo = this.row.phoneNo;
     this.dataObject.date=momentFormatTime();
  },
  methods: {
    getLoad() { 
      signMemberList({memberId:this.row.id}).then(response => {
        let data= response.data || [];
        if(data.length){
          this.selectedDates=data.map(item=>momentFormatTime(item.signDate));
        }
      });
    },
    handleCloseDialog() {
      this.$emit("handle-cancel");
    },
    handleConfirmDialog(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading=true;

          addSignMember({signDate:this.dataObject.date,memberId:this.row.id}).then(response => {
            this.resetForm(formName);
            this.$message({
              message: "签到成功",
              type: "success",
              duration: 1000
            });
            this.loading=false;
            this.$emit("handle-confirm"); 
          }).catch(()=>{
            this.loading=false;
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataObject = Object.assign({}, defaultObject);
    },

  }
};
</script>
<style>
 .selected-date {
  background-color: #e6f7ff; /* 浅蓝色背景 */
  border: 1px solid #1890ff; /* 蓝色边框 */
  border-radius: 4px;
}

/* 鼠标悬停时样式优化 */
 .selected-date:hover {
  background-color: #bae7ff;
}

/* 可选：添加“已选”文字标识（通过伪元素） */
 .selected-date::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #1890ff;
}


</style>